<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-monitor"></i>资源需求信息 </span>
            <el-button type="info" round >集中式资源分配</el-button>
<!--            <el-button type="info" round @click="openDialog">分布式资源分配</el-button>-->
            <el-button type="primary" round  @click="openDialog">分布式资源分配</el-button>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%">
              <tbody>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">企业名称</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">链点名称</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">所需资源</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">所需数量</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">所需资源</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">所需数量</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">预算输出</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">企业1</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">No.MJ202106</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">车胎</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">100</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">锂电池</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">2000</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">300000</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">企业2</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">No.MJ202107</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">车灯</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">200</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">锂电池</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">3000</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">100000</div></td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-pie-chart"></i> 任务实时分配待分配企业</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div>
              <div id="echart1"></div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-odometer"></i> 资源比例占比</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div>
              <div id="echart2"></div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog :visible="showDialog" @close="closeDialog" title="分布式资源调度方案">
      <div id="chainmodel" style="width: 600px;height:600px;"></div>
    </el-dialog>

  </div>
</template>


<script>

import { listInformation, getInformation, delInformation, addInformation, updateInformation } from "@/api/Resource/information";

import * as echarts from 'echarts';

var AData = ['欧洲矿业', '澳洲力拓集团'];
var BData = ['宁德时代', '潍柴动力','派能科技'];
var CData = ['理想汽车', '比亚迪'];
var DData = ['湖南销售处','广东销售处'];
var linkssss = [['欧洲矿业','宁德时代'],['澳洲力拓集团','宁德时代'],['欧洲矿业','潍柴动力'],['澳洲力拓集团','派能科技'],['宁德时代','理想汽车']
  ,['宁德时代','比亚迪'],['潍柴动力','比亚迪'],['派能科技','理想汽车'],['派能科技','比亚迪'],['比亚迪','湖南销售处'],['比亚迪','广东销售处'],
  ['理想汽车','湖南销售处']]

var legendData = ['原材料厂商', '供应商', '核心企业','销售商'];
var links = [];
var data1 = [],
  data2 = [],
  data3 = [];
var layout = 'none';
//第一层数据循环
for (var i = 0; i < AData.length; i++) {
  data1.push({
    name: AData[i],
    symbolSize: [30, 20],
    x: 0,
    y: i * (100 / AData.length),
    // value: 'ssss',
    category: 0,

  });
}
//第二层数据循环
for (var i = 0; i < BData.length; i++) {
  data2.push({
    name: BData[i],
    symbolSize: [30, 20],
    x: 30,
    y: i * (100 / BData.length),
    //value: [30, i * (100 / BData.length)],
    category: 1,
  });
}
//第三层数据循环
for (var i = 0; i < CData.length; i++) {
  data3.push({
    name: CData[i],
    symbolSize: [30, 20],
    x: 60,
    y: i * (100 / CData.length),
    value: [60, i * (100 / CData.length)],
    category: 2,
  });
}
//第四层数据循环
for (var i = 0; i < DData.length; i++) {
  data3.push({
    name: DData[i],
    symbolSize: [30, 20],
    x: 90,
    y: i * (100 / DData.length),
    // value: [60, i * (100 / lastData.length)],
    category: 3,
  });
}
//.....多层数据绑定出现时，采用双重循环绑定数据

//连接线数据建立
linkssss.forEach(item =>{
  links.push({
    source:item[0],
    label: {
      show: true,
      formatter: '{c}',
    },
    value:'',
    target:item[1],
  })
});
var datalist = data1.concat(data2, data3);

export default {
  name: "Information",
  data() {
    return {
      showDialog: false,
      graph: null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示任务6条件
      showSearch: true,
      // 总条数
      total: 0,
      // 产业链链点信息表格数据
      informationList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        cName: null,
        cRole: null,
        cBusiness: null,
        cMaximport: null,
        cMaxexport: null,
        cAddress: null,
        status: null,

      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        status: [
          { required: true, message: "状态不能为空", trigger: "change" }
        ],
      }
    };
  },
  // 页面初始化挂载dom
  mounted() {
    // this.getLoadEcharts();
    // this.openLoading();
    setTimeout(() => {
      this.getLoadEcharts1()
    }, 1000);
    setTimeout(() => {
      this.getLoadEcharts2()
    }, 1000);
  },
  methods: {
    getLoadEcharts1() {
      var myChart = this.$echarts.init(
        document.getElementById("echart1")
      );
      const colorList = [
        {color1:'#c5223b',color2:'#fa768a'},
        {color1:'#de7110',color2:'#fecd70'},
        {color1:'#d09f08',color2:'#FFD145'},
        {color1:'#238483',color2:'#55C27C'},
        {color1:'#45EAFF',color2:'#40ADAC'},
        {color1:'#12B3F8',color2:'#7DE8FF'},
        {color1:'#0176D3',color2:'#13B7FF'},
        {color1:'#015BD3',color2:'#138DFF'},
        {color1:'#7c94e7',color2:'#1e2783'},
      ];
      var option ={
        "animation": false,
        "tooltip": {
          "trigger": "item",
          "formatter": "{b}"
        },
        "grid": {
          "top": 100,
          "left": "3%",
          "right": "4%",
          "bottom": 100,
          "containLabel": true
        },
        "backgroundColor": "#ffffff",
        "xAxis": [
          {
            "show": false,
            "type": "value",
            "name": "下",
            "nameGap": 85,
            "nameLocation": "middle",
            "nameTextStyle": {
              "color": "black",
              "backgroundColor": "#fff",
              "verticalAlign": "center",
              "padding": [
                6,
                5
              ],
              "borderWidth": 1,
              "borderColor": "#dcdee291",
              "fontSize": 16,
              "fontWeight": "bolder"
            },
            "axisLine": {
              "lineStyle": {
                "shadowBlur": 1,
                "shadowOffsetY": 85,
                "shadowColor": "#dcdee291",
                "color": "#fff",
                "width": 1
              }
            },
            "axisTick": {
              "show": false
            },
            "axisLabel": {
              "show": false
            },
            "splitLine": {
              "show": false
            }
          },
          {
            "show": false,
            "type": "value",
            "name": "上",
            "nameLocation": "middle",
            "nameGap": 85,
            "nameTextStyle": {
              "color": "black",
              "backgroundColor": "#fff",
              "verticalAlign": "center",
              "padding": [
                6,
                5
              ],
              "borderWidth": 1,
              "borderColor": "#dcdee291",
              "fontSize": 16,
              "fontWeight": "bolder"
            },
            "axisLabel": {
              "show": false
            },
            "axisLine": {
              "symbol": "arrow",
              "lineStyle": {
                "cap": "square",
                "shadowBlur": 1,
                "shadowOffsetY": -85,
                "shadowColor": "#dcdee291",
                "color": "#fff",
                "width": 1
              },
              "show": true
            },
            "axisTick": {
              "show": false
            },
            "splitLine": {
              "show": false
            }
          }
        ],
        "yAxis": {
          "show": false,
          "type": "value"
        },
        "series": [
          {
            "type": "graph",
            "coordinateSystem": "cartesian2d",
            label: {
              normal: {
                show: true,
                position: 'bottom',
                color: '#12b5d0',
                formatter: function(x) {
                  return [
                    `{name_po|${x.data.PositionName}}`,
                    `{value_po|${x.data.svalue}}` +
                    (x.data.alarm ? '{a|}' : ''),
                  ].join('\n');
                },
                rich: {
                  a: {
                    align: 'right',
                    padding: [2, 2],
                    backgroundColor: {
                      image: 'documents/static/defaultImg/warning.png',
                    },
                    verticalAlign: 'middle',
                  },

                  name_po: {
                    fontFamily: 'Microsoft YaHei',
                    fontweight: 400,
                    color: '#666666',
                    padding: [6, 2],
                  },
                  time_po: {
                    fontFamily: 'Microsoft YaHei',
                    fontweight: 600,
                    color: '#666666',
                    padding: [3, 2],
                  },
                  value_po: {
                    padding: [4, 5],
                    backgroundColor: '#fff',
                    borderColor: '#DBDBDB',
                    borderWidth: 1,
                    textAlign: 'center',
                    color: '#333333',
                  },
                },
              },
            },
            "data": [
              {
                "name": "1009E",
                "tooltip": {
                  "formatter": "1_bottom:-- <br />"
                },
                "StationCode": "1009E",
                "PositionName": "待分配企业1",
                "svalue": "--",
                "slasttime": null,
                "x": 375,
                "y": 1,
                "alarm": "停机",
                "symbolSize": [
                  60,
                  40
                ],
                "symbol":
                  'image://',
                "value": [
                  375,
                  1
                ],
                "label": {
                  "show": true,
                  "position": "bottom"
                }
              },
              {
                "name": "1011E",
                "tooltip": {
                  "formatter": "2_bottom:9.330 <br />"
                },
                "StationCode": "1011E",
                "PositionName": "待分配企业2",
                "svalue": "9.330",
                "slasttime": "10-29 16:00",
                "x": 750,
                "y": 1,
                "alarm": null,
                "symbolSize": [
                  60,
                  40
                ],
                "symbol": 'image://',
                "value": [
                  750,
                  1
                ],
                "label": {
                  "show": true,
                  "position": "bottom"
                }
              },
              {
                "name": "1018E",
                "tooltip": {
                  "formatter": "可分配资源数量:4.535 <br />"
                },
                "StationCode": "1018E",
                "PositionName": "待分配企业3",
                "svalue": "0.000",
                "slasttime": "10-29 16:00",
                "x": 1125,
                "y": 1,
                "alarm": "停机",
                "symbolSize": [
                  60,
                  40
                ],
                "symbol": 'path://M1308.444444 0h-1213.629629C42.477037 0 0 40.96 0 91.401481v841.197038C0 983.04 42.477037 1024 94.814815 1024h1213.629629c52.337778 0 94.814815-40.96 94.814815-91.401481V91.401481C1403.259259 40.96 1360.782222 0 1308.444444 0zM94.814815 36.560593h1213.629629c31.402667 0 56.888889 24.576 56.888889 54.878814v841.121186c0 30.340741-25.486222 54.878815-56.888889 54.878814h-1213.629629c-31.402667 0-56.888889-24.576-56.888889-54.878814V91.439407c0-30.340741 25.486222-54.878815 56.888889-54.878814zM682.666667 113.777778H113.777778v796.444444h568.888889V113.777778zM1147.904 872.296296h-35.422815v37.925926h35.422815v-37.925926zM1077.096296 872.296296h-35.384889v37.925926h35.384889v-37.925926z m-70.807703 0H970.903704v37.925926h35.384889v-37.925926z m-70.769778 0h-35.422815v37.925926h35.422815v-37.925926z m318.577778 0H1183.288889v37.925926H1289.481481v-75.851852h-35.384888v37.925926zM758.518519 872.296296h35.384888v-37.925926H758.518519v37.925926z m35.384888-113.777777H758.518519v37.925925h35.384888v-37.925925zM1289.481481 758.518519h-35.384888v37.925925H1289.481481v-37.925925z m-495.578074-75.851852H758.518519v37.925926h35.384888v-37.925926zM1289.481481 682.666667h-35.384888v37.925926H1289.481481v-37.925926z m-495.578074-75.851852H758.518519v37.925926h35.384888v-37.925926zM1289.481481 606.814815h-35.384888v37.925926H1289.481481v-37.925926z m-495.578074-75.851852H758.518519v37.925926h35.384888v-37.925926zM1289.481481 530.962963h-35.384888v37.925926H1289.481481v-37.925926z m-495.578074-75.851852H758.518519v37.925926h35.384888v-37.925926zM1289.481481 455.111111h-35.384888v37.925926H1289.481481v-37.925926z m-495.578074-75.851852H758.518519v37.925926h35.384888v-37.925926zM1289.481481 379.259259h-35.384888v37.925926H1289.481481v-37.925926zM793.903407 303.407407H758.518519v37.925926h35.384888V303.407407zM1289.481481 303.407407h-35.384888v37.925926H1289.481481V303.407407zM793.903407 227.555556H758.518519v37.925925h35.384888V227.555556zM1289.481481 227.555556h-35.384888v37.925925H1289.481481V227.555556zM864.711111 113.777778H758.518519v75.851852h35.384888V151.703704H864.711111V113.777778z m389.385482 37.925926v37.925926H1289.481481V151.703704h-35.384888z m-318.577778-37.925926h-35.422815v37.925926h35.422815V113.777778z m70.769778 0H970.903704v37.925926h35.384889V113.777778zM1077.096296 113.777778h-35.384889v37.925926h35.384889V113.777778z m70.807704 0h-35.422815v37.925926h35.422815V113.777778z m70.769778 0H1183.288889v37.925926h35.384889V113.777778zM864.711111 872.296296h-35.384889v37.925926h35.384889v-37.925926zM1061.925926 606.814815h227.555555v303.407407h-227.555555z',
                "value": [
                  1125,
                  1
                ],
                "label": {
                  "show": true,
                  "position": "bottom"
                }
              },
              {
                "name": "1023E",
                "tooltip": {
                  "formatter": "4_bottom:7.160 <br />"
                },
                "StationCode": "1023E",
                "PositionName": "待分配企业4",
                "svalue": "7.160",
                "slasttime": "10-29 16:00",
                "x": 1500,
                "y": 1,
                "alarm": null,
                "symbolSize": [
                  60,
                  40
                ],
                "symbol":'image://',
                "value": [
                  1500,
                  1
                ],
                "label": {
                  "show": true,
                  "position": "bottom"
                }
              },
              {
                "name": "1017E",
                "tooltip": {
                  "formatter": "7_top:35.560 <br />"
                },
                "StationCode": "1017E",
                "PositionName": "任务1",
                "Storage_etra": 0,
                "Storage": "类一",
                "svalue": "35.560",
                "slasttime": "10-29 16:00",
                "x": 125,
                "y": 13,
                "alarm": null,
                "symbolSize": [
                  60,
                  40
                ],
                "symbol":
                  'image://',
                "value": [
                  125,
                  13
                ],
                "label": {
                  "show": true,
                  "position": "top"
                }
              },
              {
                "name": "1016E",
                "tooltip": {
                  "formatter": "6_top:11.460 <br />"
                },
                "StationCode": "1016E",
                "PositionName": "任务2",
                "Storage_etra": 0,
                "Storage": "类一",
                "svalue": "11.460",
                "slasttime": "10-29 16:03",
                "x": 375,
                "y": 13,
                "alarm": null,
                "symbolSize": [
                  60,
                  40
                ],
                "symbol":
                  'image://',
                "value": [
                  375,
                  13
                ],
                "label": {
                  "show": true,
                  "position": "top"
                }
              },
              {
                "name": "1015E",
                "tooltip": {
                  "formatter": "5_top:12.510 <br />"
                },
                "StationCode": "1015E",
                "PositionName": "任务3",
                "Storage_etra": 0,
                "Storage": "类一",
                "svalue": "12.510",
                "slasttime": "10-29 16:02",
                "x": 625,
                "y": 13,
                "alarm": null,
                "symbolSize": [
                  60,
                  40
                ],
                "symbol":
                  'image://',
                "value": [
                  625,
                  13
                ],
                "label": {
                  "show": true,
                  "position": "top"
                }
              },
              {
                "name": "1014E",
                "tooltip": {
                  "formatter": "4_top:9.930 <br />"
                },
                "StationCode": "1014E",
                "PositionName": "任务4",
                "Storage_etra": 0,
                "Storage": "类一",
                "svalue": "9.930",
                "slasttime": "10-29 16:00",
                "x": 875,
                "y": 13,
                "alarm": null,
                "symbolSize": [
                  60,
                  40
                ],
                "symbol":
                  'image://',
                "value": [
                  875,
                  13
                ],
                "label": {
                  "show": true,
                  "position": "top"
                }
              },
              {
                "name": "1013E",
                "tooltip": {
                  "formatter": "3_top:9.270 <br />"
                },
                "StationCode": "1013E",
                "PositionName": "任务5",
                "Storage_etra": 0,
                "Storage": "类一",
                "svalue": "9.270",
                "slasttime": "10-29 16:02",
                "x": 1125,
                "y": 13,
                "alarm": null,
                "symbolSize": [
                  60,
                  40
                ],
                "symbol":
                  'image://',
                "value": [
                  1125,
                  13
                ],
                "label": {
                  "show": true,
                  "position": "top"
                }
              },
              {
                "name": "10012E",
                "tooltip": {
                  "formatter": "2_top:54.050 <br />"
                },
                "StationCode": "10012E",
                "PositionName": "任务6",
                "Storage_etra": 0,
                "Storage": "类一",
                "svalue": "54.050",
                "slasttime": "10-29 16:00",
                "x": 1375,
                "y": 13,
                "alarm": null,
                "symbolSize": [
                  60,
                  40
                ],
                "symbol":
                  'image://',
                "value": [
                  1375,
                  13
                ],
                "label": {
                  "show": true,
                  "position": "top"
                }
              },
              {
                "name": "1010E",
                "tooltip": {
                  "formatter": "1_top:0.000 <br />"
                },
                "StationCode": "1010E",
                "PositionName": "任务7",
                "Storage_etra": 1,
                "Storage": "类二",
                "svalue": "0.000",
                "slasttime": "10-29 16:00",
                "x": 1625,
                "y": 13,
                "alarm": "停机",
                "symbolSize": [
                  60,
                  40
                ],
                "symbol": 'path://M1308.444444 0h-1213.629629C42.477037 0 0 40.96 0 91.401481v841.197038C0 983.04 42.477037 1024 94.814815 1024h1213.629629c52.337778 0 94.814815-40.96 94.814815-91.401481V91.401481C1403.259259 40.96 1360.782222 0 1308.444444 0zM94.814815 36.560593h1213.629629c31.402667 0 56.888889 24.576 56.888889 54.878814v841.121186c0 30.340741-25.486222 54.878815-56.888889 54.878814h-1213.629629c-31.402667 0-56.888889-24.576-56.888889-54.878814V91.439407c0-30.340741 25.486222-54.878815 56.888889-54.878814zM682.666667 113.777778H113.777778v796.444444h568.888889V113.777778zM1147.904 872.296296h-35.422815v37.925926h35.422815v-37.925926zM1077.096296 872.296296h-35.384889v37.925926h35.384889v-37.925926z m-70.807703 0H970.903704v37.925926h35.384889v-37.925926z m-70.769778 0h-35.422815v37.925926h35.422815v-37.925926z m318.577778 0H1183.288889v37.925926H1289.481481v-75.851852h-35.384888v37.925926zM758.518519 872.296296h35.384888v-37.925926H758.518519v37.925926z m35.384888-113.777777H758.518519v37.925925h35.384888v-37.925925zM1289.481481 758.518519h-35.384888v37.925925H1289.481481v-37.925925z m-495.578074-75.851852H758.518519v37.925926h35.384888v-37.925926zM1289.481481 682.666667h-35.384888v37.925926H1289.481481v-37.925926z m-495.578074-75.851852H758.518519v37.925926h35.384888v-37.925926zM1289.481481 606.814815h-35.384888v37.925926H1289.481481v-37.925926z m-495.578074-75.851852H758.518519v37.925926h35.384888v-37.925926zM1289.481481 530.962963h-35.384888v37.925926H1289.481481v-37.925926z m-495.578074-75.851852H758.518519v37.925926h35.384888v-37.925926zM1289.481481 455.111111h-35.384888v37.925926H1289.481481v-37.925926z m-495.578074-75.851852H758.518519v37.925926h35.384888v-37.925926zM1289.481481 379.259259h-35.384888v37.925926H1289.481481v-37.925926zM793.903407 303.407407H758.518519v37.925926h35.384888V303.407407zM1289.481481 303.407407h-35.384888v37.925926H1289.481481V303.407407zM793.903407 227.555556H758.518519v37.925925h35.384888V227.555556zM1289.481481 227.555556h-35.384888v37.925925H1289.481481V227.555556zM864.711111 113.777778H758.518519v75.851852h35.384888V151.703704H864.711111V113.777778z m389.385482 37.925926v37.925926H1289.481481V151.703704h-35.384888z m-318.577778-37.925926h-35.422815v37.925926h35.422815V113.777778z m70.769778 0H970.903704v37.925926h35.384889V113.777778zM1077.096296 113.777778h-35.384889v37.925926h35.384889V113.777778z m70.807704 0h-35.422815v37.925926h35.422815V113.777778z m70.769778 0H1183.288889v37.925926h35.384889V113.777778zM864.711111 872.296296h-35.384889v37.925926h35.384889v-37.925926zM1061.925926 606.814815h227.555555v303.407407h-227.555555z',
                "value": [
                  1625,
                  13
                ],
                "label": {
                  "show": true,
                  "position": "top"
                }
              },
              {
                "name": "1020E",
                "tooltip": {
                  "formatter": "9_top:0.440 <br />"
                },
                "StationCode": "1020E",
                "PositionName": "任务8",
                "Storage_etra": 2,
                "Storage": "类三",
                "svalue": "0.440",
                "slasttime": "10-29 16:00",
                "x": 1875,
                "y": 13,
                "alarm": null,
                "symbolSize": [
                  60,
                  40
                ],
                symbol:'image://',
                "value": [
                  1875,
                  13
                ],
                "label": {
                  "show": true,
                  "position": "top"
                }
              },
              {
                "name": "1019E",
                "tooltip": {
                  "formatter": "8_top:0.280 <br />"
                },
                "StationCode": "1019E",
                "PositionName": "任务9",
                "Storage_etra": 2,
                "Storage": "类三",
                "svalue": "0.280",
                "slasttime": "10-29 16:02",
                "x": 2125,
                "y": 13,
                "alarm": null,
                "symbolSize": [
                  60,
                  40
                ],
                symbol:'image://',
                "value": [
                  2125,
                  13
                ],
                "label": {
                  "show": true,
                  "position": "top"
                }
              },
              {
                "name": "1025E",
                "tooltip": {
                  "formatter": "13_top:8.570 <br />"
                },
                "StationCode": "1025E",
                "PositionName": "任务10",
                "Storage_etra": 3,
                "Storage": "类四",
                "svalue": "8.570",
                "slasttime": "10-29 16:00",
                "x": 2375,
                "y": 13,
                "alarm": null,
                "symbolSize": [
                  60,
                  40
                ],
                "symbol":
                  'image://',
                "value": [
                  2375,
                  13
                ],
                "label": {
                  "show": true,
                  "position": "top"
                }
              },
              {
                "name": "1024E",
                "tooltip": {
                  "formatter": "12_top:36.480 <br />"
                },
                "StationCode": "1024E",
                "PositionName": "任务11",
                "Storage_etra": 3,
                "Storage": "类四",
                "svalue": "36.480",
                "slasttime": "10-29 16:00",
                "x": 2625,
                "y": 13,
                "alarm": null,
                "symbolSize": [
                  60,
                  40
                ],
                "symbol":
                  'image://',
                "value": [
                  2625,
                  13
                ],
                "label": {
                  "show": true,
                  "position": "top"
                }
              },
              {
                "name": "1022E",
                "tooltip": {
                  "formatter": "11_top:29.070 <br />"
                },
                "StationCode": "1022E",
                "PositionName": "任务12",
                "Storage_etra": 3,
                "Storage": "类四",
                "svalue": "29.070",
                "slasttime": "10-29 16:00",
                "x": 2875,
                "y": 13,
                "alarm": null,
                "symbolSize": [
                  60,
                  40
                ],
                "symbol":
                  'image://',
                "value": [
                  2875,
                  13
                ],
                "label": {
                  "show": true,
                  "position": "top"
                }
              },
              {
                "name": "1021E",
                "tooltip": {
                  "formatter": "10_top:28.330 <br />"
                },
                "StationCode": "1021E",
                "PositionName": "任务13",
                "Storage_etra": 3,
                "Storage": "类四",
                "svalue": "28.330",
                "slasttime": "10-29 16:00",
                "x": 3125,
                "y": 13,
                "alarm": null,
                "symbolSize": [
                  60,
                  40
                ],
                "symbol":
                  'image://',
                "value": [
                  3125,
                  13
                ],
                "label": {
                  "show": true,
                  "position": "top"
                }
              }
            ],
            "z": 4,
            "itemStyle": {
              "normal": {
                "label": {
                  "show": true
                }
              }
            },
          },
          {
            "name": "line",
            "type": "lines",
            "coordinateSystem": "cartesian2d",
            "z": 0,
            "polyline": false,
            "effect": {
              "show": true,
              "period": 8,
              "trailLength": 0.3,
              "symbolSize": 10,
              "symbol": "pin",
              "loop": true,
              //"color": "#1eaa2b"
            },
            "lineStyle": {
              "type": "dashed",
              "color": "#37a2ff",
              "width": 2,
              "opacity": 0.3,
              "curveness": 0
            },
            "data": [
              [
                {
                  "coord": [
                    375,
                    1
                  ]
                },
                {
                  "coord": [
                    1625,
                    13
                  ]
                }
              ],
              [
                {
                  "coord": [
                    750,
                    1
                  ]
                },
                {
                  "coord": [
                    1375,
                    13
                  ]
                }
              ],
              [
                {
                  "coord": [
                    750,
                    1
                  ]
                },
                {
                  "coord": [
                    1125,
                    13
                  ]
                }
              ],
              [
                {
                  "coord": [
                    750,
                    1
                  ]
                },
                {
                  "coord": [
                    875,
                    13
                  ]
                }
              ],
              [
                {
                  "coord": [
                    750,
                    1
                  ]
                },
                {
                  "coord": [
                    625,
                    13
                  ]
                }
              ],
              [
                {
                  "coord": [
                    750,
                    1
                  ]
                },
                {
                  "coord": [
                    375,
                    13
                  ]
                }
              ],
              [
                {
                  "coord": [
                    750,
                    1
                  ]
                },
                {
                  "coord": [
                    125,
                    13
                  ]
                }
              ],
              [
                {
                  "coord": [
                    1125,
                    1
                  ]
                },
                {
                  "coord": [
                    2125,
                    13
                  ]
                }
              ],
              [
                {
                  "coord": [
                    1125,
                    1
                  ]
                },
                {
                  "coord": [
                    1875,
                    13
                  ]
                }
              ],
              [
                {
                  "coord": [
                    1500,
                    1
                  ]
                },
                {
                  "coord": [
                    3125,
                    13
                  ]
                }
              ],
              [
                {
                  "coord": [
                    1500,
                    1
                  ]
                },
                {
                  "coord": [
                    2875,
                    13
                  ]
                }
              ],
              [
                {
                  "coord": [
                    1500,
                    1
                  ]
                },
                {
                  "coord": [
                    2625,
                    13
                  ]
                }
              ],
              [
                {
                  "coord": [
                    1500,
                    1
                  ]
                },
                {
                  "coord": [
                    2375,
                    13
                  ]
                }
              ]
            ]
          }
        ]
      }
      myChart.setOption(option);
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载缓存监控数据，请稍候！");
    },
    getLoadEcharts2() {
      var myChart = this.$echarts.init(
        document.getElementById("echart2")
      );
      //展示数据
      const optionData = [];
//扇形图颜色数据
      const colorList = [
        {color1:'#c5223b',color2:'#fa768a'},
        {color1:'#de7110',color2:'#fecd70'},
        {color1:'#d09f08',color2:'#FFD145'},
        {color1:'#238483',color2:'#55C27C'},
        {color1:'#45EAFF',color2:'#40ADAC'},
        {color1:'#12B3F8',color2:'#7DE8FF'},
        {color1:'#0176D3',color2:'#13B7FF'},
        {color1:'#015BD3',color2:'#138DFF'},
        {color1:'#7c94e7',color2:'#1e2783'},
      ];
//请求的数据
      const resultData = [
        {
          name:'资源1',
          value:95,
        },
        {
          name:'资源2',
          value:98,
        },
        {
          name:'资源3',
          value:90,
        },
        {
          name:'资源4',
          value:100,
        },
        {
          name:'资源5',
          value:10,
        },
        {
          name:'资源6',
          value:100,
        },
        {
          name:'资源7',
          value:100,
        },
        {
          name:'资源8',
          value:100,
        },
        {
          name:'资源9',
          value:100,
        }
      ];
      let sum = 0;
      resultData.forEach(item=>{
        sum += item.value;
      })
      resultData.forEach(item=>{
        optionData.push({value:item.value,name:item.name});
        optionData.push({name:'',value:sum/100,itemStyle:{color:'transparent'}});
      })
      var option = {
        backgroundColor: "",
        //你的代码
        legend:[
          {
            orient:'vertical',
            right:'30%',
            top:'26%',
            itemGap:30,
            textStyle:{
              color:'#ffffff',
              fontSize:12,
            },
            data:['资源1','资源2','资源3','资源4','资源5'],
          },
          {
            orient:'vertical',
            right:'20%',
            top:'26%',
            itemGap:30,
            textStyle:{
              color:'#ffffff',
              fontSize:12,
            },
            data:['资源7','资源8','资源9','资源10'],
          }
        ],
        tooltip:{
          trigger:'item',
          formatter(params){
            let res = '';
            const {marker,name,value} = params;
            if(name !== ''){
              res += `${marker}${name}:${value}`
            }
            return res;
          }
        },
        series:[
          {
            type:'pie',
            roseType: 'radius',
            radius:['20%','60%'],
            center:['30%','50%'],
            label:{
              position:'inside',
              formatter(item){
                if(item.name === ''){
                  return '';
                }
                return `${item.value}`;
              },
              textStyle:{
                fontSize:16,
                color:'#ffffff'
              }
            },
            labelLine:{
              show:false,
            },
            itemStyle:{
              normal:{
                color(params){
                  return colorList[parseInt(params.dataIndex/2)].color1;
                }
              }
            },
            z:3,
            data:optionData,
          },
          {
            type:'pie',
            roseType: 'radius',
            radius:['20%','62%'],
            center:['30%','50%'],
            label:{
              show:false,
            },
            labelLine:{
              show:false,
            },
            itemStyle:{
              normal:{
                color(params){
                  return colorList[parseInt(params.dataIndex/2)].color2;
                }
              }
            },
            z:2,
            data:optionData,
          }
        ]
      };
      myChart.setOption(option);
    },

    openDialog() {
      this.showDialog = true;
      this.$nextTick(() => {
        this.renderGraph();
      });
    },

    closeDialog() {
      this.showDialog = false;
      this.destroyGraph();
    },

    renderGraph() {

      var myChart = echarts.init(document.getElementById('chainmodel'));

      let dataInfo = [
        {
          name: '任务1',
          value: 52,
          outNum: 52,
          loseNum: 0,
          symbolSize: 50,
          loseRate: '0.0000',
        },
        {
          name: '任务11',
          value: 1,
          outNum: 0,
          loseNum: 1,
          symbolSize: 50,
          loseRate: '1.0000',
        },
        {
          name: '任务14',
          value: 15,
          outNum: 4,
          loseNum: 11,
          symbolSize: 50,
          loseRate: '0.7333',
        },
        {
          name: '任务7',
          value: 52,
          outNum: 42,
          loseNum: 10,
          symbolSize: 50,
          loseRate: '0.1923',
        },
        {
          name: '任务6',
          value: 3,
          outNum: 3,
          loseNum: 0,
          symbolSize: 50,
          loseRate: '0.0000',
        },
        {
          name: '任务8',
          value: 52,
          outNum: 52,
          loseNum: 0,
          symbolSize: 50,
          loseRate: '0.0000',
        },
        {
          name: '任务13',
          value: 11,
          outNum: 3,
          loseNum: 8,
          symbolSize: 50,
          loseRate: '0.7273',
        },
        {
          name: '任务2',
          value: 52,
          outNum: 52,
          loseNum: 0,
          symbolSize: 50,
          loseRate: '0.0000',
        },
        {
          name: '任务5',
          value: 52,
          outNum: 52,
          loseNum: 0,
          symbolSize: 50,
          loseRate: '0.0000',
        },
        {
          name: '任务9',
          value: 2,
          outNum: 2,
          loseNum: 0,
          symbolSize: 50,
          loseRate: '0.0000',
        },
        {
          name: '任务10',
          value: 20,
          outNum: 15,
          loseNum: 5,
          symbolSize: 50,
          loseRate: '0.2500',
        },
        {
          name: '任务12',
          value: 1,
          outNum: 1,
          loseNum: 0,
          symbolSize: 50,
          loseRate: '0.0000',
        },
        {
          name: '任务4',
          value: 39,
          outNum: 33,
          loseNum: 6,
          symbolSize: 50,
          loseRate: '0.1538',
        },
        {
          name: '任务3',
          value: 47,
          outNum: 36,
          loseNum: 11,
          symbolSize: 50,
          loseRate: '0.2340',
        },
      ];
      let dataLink = [
        {
          source: '任务1',
          target: '任务5',
          value: 52,
        },
        {
          source: '任务1',
          target: '任务4',
          value: 52,
        },
        {
          source: '任务1',
          target: '任务3',
          value: 52,
        },
        {
          source: '任务1',
          target: '任务2',
          value: 52,
        },
        {
          source: '任务11',
          target: null,
          value: 1,
        },
        {
          source: '任务14',
          target: null,
          value: 15,
        },
        {
          source: '任务14',
          target: '任务4',
          value: 15,
        },
        {
          source: '任务14',
          target: '任务3',
          value: 15,
        },
        {
          source: '任务14',
          target: '任务13',
          value: 15,
        },
        {
          source: '任务7',
          target: null,
          value: 52,
        },
        {
          source: '任务7',
          target: '任务10',
          value: 52,
        },
        {
          source: '任务7',
          target: '任务4',
          value: 52,
        },
        {
          source: '任务7',
          target: '任务14',
          value: 52,
        },
        {
          source: '任务7',
          target: '任务3',
          value: 52,
        },
        {
          source: '任务7',
          target: '任务13',
          value: 52,
        },
        {
          source: '任务6',
          target: '任务3',
          value: 3,
        },
        {
          source: '任务6',
          target: '任务8',
          value: 3,
        },
        {
          source: '任务8',
          target: '任务10',
          value: 52,
        },
        {
          source: '任务8',
          target: '任务4',
          value: 52,
        },
        {
          source: '任务8',
          target: '任务7',
          value: 52,
        },
        {
          source: '任务8',
          target: '任务3',
          value: 52,
        },
        {
          source: '任务8',
          target: '任务6',
          value: 52,
        },
        {
          source: '任务13',
          target: null,
          value: 11,
        },
        {
          source: '任务13',
          target: '任务14',
          value: 11,
        },
        {
          source: '任务13',
          target: '任务3',
          value: 11,
        },
        {
          source: '任务2',
          target: '任务5',
          value: 52,
        },
        {
          source: '任务2',
          target: '任务10',
          value: 52,
        },
        {
          source: '任务2',
          target: '任务4',
          value: 52,
        },
        {
          source: '任务2',
          target: '任务3',
          value: 52,
        },
        {
          source: '任务2',
          target: '任务8',
          value: 52,
        },
        {
          source: '任务5',
          target: '任务4',
          value: 52,
        },
        {
          source: '任务5',
          target: '任务3',
          value: 52,
        },
        {
          source: '任务5',
          target: '任务8',
          value: 52,
        },
        {
          source: '任务5',
          target: '任务2',
          value: 52,
        },
        {
          source: '任务9',
          target: '任务12',
          value: 2,
        },
        {
          source: '任务9',
          target: '任务7',
          value: 2,
        },
        {
          source: '任务10',
          target: null,
          value: 20,
        },
        {
          source: '任务10',
          target: '任务11',
          value: 20,
        },
        {
          source: '任务10',
          target: '任务4',
          value: 20,
        },
        {
          source: '任务10',
          target: '任务6',
          value: 20,
        },
        {
          source: '任务10',
          target: '任务3',
          value: 20,
        },
        {
          source: '任务10',
          target: '任务7',
          value: 20,
        },
        {
          source: '任务10',
          target: '任务8',
          value: 20,
        },
        {
          source: '任务12',
          target: '任务4',
          value: 1,
        },
        {
          source: '任务4',
          target: null,
          value: 39,
        },
        {
          source: '任务4',
          target: '任务5',
          value: 39,
        },
        {
          source: '任务4',
          target: '任务9',
          value: 39,
        },
        {
          source: '任务4',
          target: '任务10',
          value: 39,
        },
        {
          source: '任务4',
          target: '任务3',
          value: 39,
        },
        {
          source: '任务4',
          target: '任务7',
          value: 39,
        },
        {
          source: '任务4',
          target: '任务8',
          value: 39,
        },
        {
          source: '任务4',
          target: '任务2',
          value: 39,
        },
        {
          source: '任务3',
          target: null,
          value: 47,
        },
        {
          source: '任务3',
          target: '任务9',
          value: 47,
        },
        {
          source: '任务3',
          target: '任务10',
          value: 47,
        },
        {
          source: '任务3',
          target: '任务4',
          value: 47,
        },
        {
          source: '任务3',
          target: '任务7',
          value: 47,
        },
        {
          source: '任务3',
          target: '任务6',
          value: 47,
        },
        {
          source: '任务3',
          target: '任务8',
          value: 47,
        },
        {
          source: '任务3',
          target: '任务2',
          value: 47,
        },
      ];

      let finalvalue = []
      const func = (node, index) => {
        const nodeNames = node.map(ii => ii.name)

        // 现有的一级的target
        const target = dataLink.filter(item => nodeNames.includes(item.source)).map(i => i.target)

        // 去重后的本次数据
        const setTarget = Array.from(new Set(target))

        // 计算节点的坐标（第一个为准）
        const arr = setTarget.filter(em => !nodeNames.includes(em) && em).map((item, inde) => {
          return {
            name: item,
            value: [index + 1, inde * 10]
          }
        })
        // 拼接上一轮数据
        node = node.concat(arr)
        if (index < dataInfo.length && arr.length !== 0) func(node, index + 1)
        else finalvalue = node
      };

      const firstNode = [
        {
          name: '任务1',
          value: [0, 10],
        },
      ];
      func(firstNode, 0)

// 对已有数据重写value
      dataInfo.forEach(item => {
        finalvalue.forEach(em => {
          if (em.name === item.name) item.value = em.value
        })
      })

      var option = {
        backgroundColor: '#fff',
        title: {
          text: '',
          top: 'top',
          left: 'center',
        },
        itemStyle: {
          normal: {
            color: '#000',
          },
          shadowBlur: 10,
        },
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        xAxis: {
          show: false,
          type: 'value',
        },
        yAxis: {
          show: false,
          type: 'value',
        },
        series: [
          {
            type: 'graph',
            coordinateSystem: 'cartesian2d',
            legendHoverLink: false,
            hoverAnimation: true,
            nodeScaleRatio: false,
            //建头
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 15],
            edgeLabel: {
              show: false,
              normal: {
                show: true,
                position: 'middle',
                textStyle: {
                  fontSize: 12,
                },
                formatter: '{c}',
              },
            },
            focusNodeAdjacency: true,
            roam: true,
            categories: [
              {
                name: '一级关系',
                itemStyle: {
                  //可配置颜色
                  normal: {
                    color: '#A170DD',
                  },
                },
              },
              {
                name: '二级关系',
                itemStyle: {
                  //可配置颜色
                  normal: {
                    color: '#41B1EF',
                  },
                },
              },
              {
                name: '三级关系',
                itemStyle: {
                  //可配置颜色
                  normal: {
                    color: '#E8B842',
                  },
                },
              },
              {
                name: '四级关系',
                itemStyle: {
                  //可配置颜色
                  normal: {
                    color: '#667AED',
                  },
                },
              },
            ],
            //圆形上面的文字
            label: {
              normal: {
                position: 'inside',
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 12,
                },
              },
            },
            force: {
              repulsion: 2500,
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: '#157eff',
                  },
                  {
                    offset: 1,
                    color: '#35c2ff',
                  },
                ]),
              },
              shadowBlur: 10,
            },
            data: dataInfo,
            links: dataLink,
          },
        ],
      };

      myChart.setOption(option);

      this.graph=myChart;

    },

    destroyGraph() {
      if (this.graph) {
        this.graph.destroy();
        this.graph = null;
      }
    },
  }

};

</script>
<style scoped>
#echart1{
  width: 600px;
  height: 420px;
}
#echart2{
  width: 600px;
  height: 420px;
}
</style>


